<template>
  <div id="map" ref="mapId"></div>
  <div class="bg-pink-600 w-200px h-200px">左边内容</div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-gl'
import mapboxgl from 'mapbox-gl'
import geojson from './assets/map.json'

const mapId = ref(null) as any

const mapJson = new URL('./assets/map.json', import.meta.url).href
const url = new URL('./assets/map_ing.json', import.meta.url).href

const bg_img = new URL('../../assets/logo.png', import.meta.url).href
const map_bg = new URL('./assets/logo.png', import.meta.url).href
console.log(bg_img, 'bg_img')

function math() {
  var flag = Math.floor(Math.random() * 2)
  if (flag == 1) {
    return -(Math.random() + Math.random())
  } else {
    return Math.random() + Math.random()
  }
}

// 添加点
function createMarkerByHTMLNode(value: any, map: any) {
  const el = document.createElement('div')
  const width = 60
  const height = 60
  el.className = 'marker'
  el.style.width = `${width}px`
  el.style.height = `${height}px`
  el.style.backgroundImage = `url(${bg_img}/)`
  new mapboxgl.Marker(el).setLngLat([value.lng, value.lat]).addTo(map)
}

onMounted(() => {
  mapboxgl.accessToken =
    'pk.eyJ1IjoieGlueGlhbmciLCJhIjoiY2w0ZTNnMGs3MDBkdzNscDBjb3pjaWQ5YiJ9.d2Zjk81sQFYpiQ_BxiCHYA'
  // 地图初始化
  const map = new mapboxgl.Map({
    container: 'map', // container ID
    center: [121.108409, 28.139011], // starting position [lng, lat]
    zoom: 9, // starting zoom
    minZoom: 6,
    maxZoom: 17,
    style: url, // style URL or style object
    hash: true, // sync `center`, `zoom`, `pitch`, and `bearing` with URL
    // pitch: 60, // 倾斜高度
    // bearing: -60, // 轴距高度
  })

  const list = [
    { lng: 120.721941, lat: 30.286334 },
    { lng: 120.825288, lat: 30.262687 },
    { lng: 120.916036, lat: 30.285762 },
  ]
  // 地图加载
  map.on('load', e => {
    list.forEach((item: any) => {
      createMarkerByHTMLNode(item, map)
    })

    // for (const marker of geojson.features) {
    //   const el = document.createElement('div')
    //   // console.log(marker, bg_img)

    //   const width = 60
    //   const height = 60
    //   el.className = 'marker'
    //   el.style.backgroundImage = `url(${bg_img}/)`
    //   el.style.width = `${width}px`
    //   el.style.height = `${height}px`
    //   el.style.backgroundSize = '100%'
    //   // el.addEventListener('click', () => {
    //   //   window.alert(marker.properties.message)
    //   // })
    //   marker.geometry.coordinates[0][0].forEach(item => {
    //     new mapboxgl.Marker(el).setLngLat(item).addTo(map)
    //   })
    // }
  })
  // 地图点击
  map.on('click', e => {
    console.log(e)
  })
  // Add a circle layer with a vector source

  //添加线图层，数据源id对应以上
  // map.addLayer({
  //   id: 'mapId',
  //   type: 'line',
  //   source: 'route',
  //   layout: {
  //     //线连接处的样式
  //     'line-join': 'round',
  //     //线结束处的样式
  //     'line-cap': 'round',
  //   },
  //   paint: {
  //     //线的颜色
  //     'line-color': 'pink',
  //     //线的宽度
  //     'line-width': 8,
  //     //线的透明度
  //     'line-opacity': 1.0,
  //   },
  // })

  // map.addControl(new mapboxgl.NavigationControl())
  // // 比例尺
  // var scale = new mapboxgl.ScaleControl({
  //   maxWidth: 100,
  //   unit: 'metric',
  // })
  // map.addControl(scale, 'bottom-left')

  // const mapIdEcharts = echarts.init(mapId.value)
  // mapIdEcharts.setOption({
  //   mapbox: {
  //     style: url,
  //     hash: false,
  //     center: [121.18, 28.65],
  //     zoom: 9,
  //     minZoom: 6,
  //     maxZoom: 17,
  //     pitch: 45,
  //     postEffect: {
  //       enable: true,
  //       screenSpaceAmbientOcclusion: {
  //         enable: true,
  //         intensity: 1.2,
  //         radius: 6,
  //         quality: 'low',
  //       },
  //       // screenSpaceReflection: {
  //       //   enable: true
  //       // }
  //     },
  //     light: {
  //       main: {
  //         intensity: 1,
  //         shadow: true,
  //         shadowQuality: 'low',
  //       },
  //       ambient: {
  //         intensity: 0.0,
  //       },
  //       ambientCubemap: {
  //         // texture: '../data/ambientCubemapTexture.hdr',
  //         // exposure: 1,
  //         // diffuseIntensity: 0.5,
  //         // specularIntensity: 2
  //       },
  //     },
  //   },
  //   series: [
  //     {
  //       type: 'lines3D',
  //       coordinateSystem: 'mapbox',
  //       effect: {
  //         show: true,
  //         period: 10,
  //         constantSpeed: 0,
  //         trailWidth: 1,
  //         trailLength: 0.4,
  //         trailOpacity: 0.5,
  //         spotIntensity: 1,
  //       },
  //       blendMode: 'lighter',
  //       polyline: true,
  //       lineStyle: {
  //         width: 4,
  //         color: 'rgb(200, 40, 0)',
  //         opacity: 0.5,
  //       },
  //       data: [],
  //     },
  //   ],
  // })
})
</script>

<style lang="scss">
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
